<template>
    <div class="movie-video">
        <van-nav-bar
            title=""
            left-arrow
            @click-left="onClickLeft"
        />
        <video-player  class="video-player-box"
                       ref="videoPlayer"
                       :options="playerOptions"
                       :playsinline="true"
                       customEventName="customstatechangedeventname">
        </video-player>
    </div>
</template>
<script>
    import 'video.js/dist/video-js.css'

    import { videoPlayer } from 'vue-video-player'

    export default {
        data() {
            return {
                id: '',
                playerOptions: {
                    muted: true,
                    language: 'en',
                    sources: [{
                        type: "video/mp4",
                        src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                    }],
                    poster: "",
                }
            }
        },
        components: {
            videoPlayer
        },
        computed: {
            player() {
                return this.$refs.videoPlayer.player
            }
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },

        },
        mounted(){
            if(this.$route.query.id) {
                this.id = this.$route.query.id || ''
            }
            if(this.$route.query.url) {
                this.playerOptions.sources[0].src = this.$route.query.url || ''
            }
            if(this.$route.query.photo) {
                this.playerOptions.poster= this.$route.query.photo || ''
            }
        }
    };
</script>
<style>
    .movie-video .video-js{
        width: 100%;
        max-height: 220px;
    }
    .movie-video .video-js .vjs-big-play-button {
        top: 50%;
        left: 50%;
        margin-top: -0.75em;
        margin-left: -1.5em;
    }
</style>
